<template>
  <section>
    <h2>正在进行<span>{{ RunNum }}</span></h2>
    <ol>
      <li v-for="item, index in torun" :key="index" v-show="!item.checked">
        <input type="checkbox" v-model="item.checked" />
        <!-- 在点击p表标签时进入编辑的状态 -->
        <input style="width:80%;margin-left:30px;" v-show="item.flag" v-model="item.title" ref="inputs" @blur="Yin(index)" />
        <!-- 不是编辑状态 -->
        <p @dblclick="dblxian(index)">{{ item.title }}</p>
        <a href="javascript:;" @click="del(index)">-</a>
      </li>
    </ol>
  </section>
</template>

<script>
import { ref } from 'vue'
export default {
  props: ['torun', 'RunNum'],
  setup(props, context) {
    // console.log(context);
    const inputs = ref()
    // 单删
    function del(index) {
      context.emit('toParentDel', index)
    }
    // 双击显示&获焦
    function dblxian(index) {
      // 当前点击的dom元素
      console.log('当前点击的dom元素', inputs.value);
      context.emit('toParentDblXian', { idx: index, dom: inputs.value })
    }
    // 单击隐藏
    function Yin(index) {
      context.emit('toParentYin', index)
    }
    return {
      del,
      Yin,
      dblxian,
      inputs
    }
  }
}
</script>

<style></style>
